<template>
	<view class="home">
		<view class="topContent">
			<view class="title">
				<view class="titleName">
					社群概览
				</view>
				<view class="right-content" v-if="false">
					<u-dropdown style=""> 
						<u-dropdown-item  v-model="optionVal1" :title="optionTitle1"  :options="options1" @change="optionChange1">
		
						</u-dropdown-item>
					</u-dropdown>
				</view>
			</view>
			<scroll-view scroll-y="true"  @scrolltolower="scrolltolower" class="Arr" >
				<view class="arrItem"  v-for="(item,index) in associationList" :key="index" @click="goDetail(1,item)">
					<view class="cover">
						<image src="../../static/img/defaultCover.png" mode="aspectFit"></image>
					</view>
					<view class="textData">
						<view class="name">
							{{item.chat_data.name ? item.chat_data.name : '未命名群聊'}}
						</view>
						<view class="desc">
							{{item.chat_data.notice ? item.chat_data.notice : '暂无群简介'}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				optionVal1 : 1,
				optionTitle1: '活跃',
				options1: [
					{
						label: '活跃',
						value: 1,
					},
					{
						label: '转化',
						value: 2,
					},
					{
						label: '增长',
						value: 3,
					}
				],
				associationList:[],
				next_cursor:''
			};
		},
		methods:{
			optionChange1(_index){
				console.log(_index);
				this.optionTitle1 = this.options1[_index-1].label
			},
			scrolltolower(){
				console.log('触底了');
				this.getAssociationList()
			},
			async getAssociationList(){
				let res = await this.myhttp({
					url:'api/Xlqwapi/getCommunityList',
					data:{
						limit:'10',
						next_cursor:this.next_cursor,
					},
					method:'GET',
				}).then(res=>{
					console.log(res)
					if(res.data.msg=='成功'){
						this.associationList = this.associationList.concat(res.data.data.data.group_chat_list) 
						this.next_cursor = res.data.data.data.next_cursor
						console.log(this.next_cursor);
					}else{
						this.$refs.uToast.show({
							title: '获取数据失败',
							type: 'error',
						})
					}
				})
			},
		},
		onLoad() {
			this.getAssociationList()
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-dropdown__content{
		height: 300rpx !important;
		box-shadow: 1px 1px 3px rgba(0,0,0,.1),0px 1px 3px rgba(0,0,0,.1) inset;
	}
	/deep/ .u-cell_title{
		white-space: nowrap;
	}
	
	.home{
		
		.topContent {
			background-color: #fff;
		  .title {
			  display: flex;
			  justify-content: space-between;
			  align-items: center;
			  padding: 20rpx;
			  margin: 10rpx 0;
			  color: #111111;
			  height: 80rpx;
				.titleName {
					font-weight: 600;
					font-size: 30rpx;
					margin-left: 30rpx;
					position: relative;
				}
				.titleName::before{
					content: '';
					position: absolute;
					left: -15%;
					top: 15%;
					width: 4rpx;
					height: 28rpx;
					background: #2772FE;
				}
			
				.right-content {
					border: 1px solid #EEEEEE;
					height: 60rpx;
					width: 120rpx;
					display: flex;
					align-items: center;
					
				}
		  }
		
		  .Arr {
			  display: flex;
			  flex-direction: column;
			  height: calc( 100vh - 80rpx);
		    .arrItem {
				height: 180rpx;
				width: 100%;
				display: flex;
				align-items: center;
				border-top: 1px solid #E4E7ED;
		      .cover {
				  width: 25%;
				  display: grid;
				  place-items: center;
		        image {
					width: 160rpx;
					height: 160rpx;
		        }
		      }
		
		      .textData {
				  height: 100%;
				  padding: 18rpx;
				  width: 75%;
				  display: flex;
				  flex-direction: column;
				  justify-content: space-evenly;
		        .name {
					font-size: 30rpx;
					font-weight: 600;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
		        }
		
		        .desc {
					width: auto;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					color: #848484;
		        }
		      }
		    }
		  }
		
		  .moreBtn {
			display: grid;
			place-items: center;
			font-size: 34rpx;
			height: 90rpx;
			color: #888888;
		  }
		}
	}	
</style>
